import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 必须引入样式
import router from './router';
import store from './store/index';
import App from './App.vue';
import { allRequest } from './api'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import lazyLoad2 from './directives/lazyload';
Vue.directive('lazy-load2', lazyLoad2);
// 引入样式文件
import 'swiper/css/swiper.css'
import AOS from 'aos';
import 'aos/dist/aos.css'; // 引入默认样式
import 'animate.css'
import '@/assets/styles/common.scss'

Vue.prototype.$api = allRequest;
// 创建 Vue 原型方法以便全局使用
Vue.prototype.$aos = AOS;
AOS.init({
  duration: 800,       // 动画时长（ms）
  easing: 'ease-in-out', // 缓动函数
  offset: 20,         // 触发距离（px）
});
setTimeout(() => {
  AOS.refresh();
}, 100);
Vue.use(VueAwesomeSwiper);
Vue.use(ElementUI); // 全局注册所有组件
// main.js 或 directives.js
Vue.directive('lazy-load2', lazyLoad2);
Vue.directive('lazy-load', {
  inserted: (el, binding) => {
    const video = el.querySelector('video');
    if (!video) return;

    // 检测是否在首屏
    const isInViewport = () => {
      const rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    };

    if (isInViewport()) {
      // 如果在首屏，直接加载视频
      video.src = binding.value;
      video.load();
    } else {
      // 如果不在首屏，使用 IntersectionObserver 懒加载
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              video.src = binding.value;
              video.load();
              observer.unobserve(el); // 加载后停止观察
            }
          });
        },
        { threshold: 0.1 } // 当 10% 的元素进入视口时触发
      );
      observer.observe(el);
    }
  },
});
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});